<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
  <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root">
</div>
<script type="text/babel">
    let hooksState = [] //存放hook
    let hooksindex = 0 //hook下标
    // useState实现
    const useState = (initialState) => {
        let currentIndex = hooksindex
        hooksState[currentIndex] = hooksState[hooksindex] || initialState
        const setState = newState => {
            hooksState[currentIndex] = newState
            render()
        }
        return [hooksState[hooksindex++], setState]
    }
    const lastDepsBoxs = [];
    const lastClearCallbacks  = [];
    let index = 0;
    const useEffect = (EffectCallback, DependencyList) => {
        const lastDeps = lastDepsBoxs[index];
        const changed =
            !lastDeps	// 首次渲染，肯定触发
            || !DependencyList	// DependencyList 不传，次次触发
            || DependencyList.some((dep, index) => dep !== lastDeps[index]);	// 正常比较
        if (changed) {
            lastDepsBoxs[index] = DependencyList;
            if (lastClearCallbacks[index]) {
                lastClearCallbacks[index]();
            }
            lastClearCallbacks[index] = EffectCallback();
        }
        index ++;

    }
    const render = () => {
        hooksindex = 0;
        index = 0;
        ReactDOM.render(<App/>, document.getElementById("root"));
    };
    const App = () => {
        const [ foo, setFoo ] = useState(1);
        useEffect(()=>{
            console.log('我只在第一次执行')
        },[])
        useEffect(()=>{
            console.log(foo,'我监听到数据变化了')
        },[foo])
        return <div onClick={()=>setFoo(foo+1)}>{foo}</div>
    }
    render()
</script>
</body>
</html>
